<!--  -->
<template>
  <el-dialog
    :center="true"
    :title="is_add_screen ? '新增' : '编辑'"
    :visible="dialogformvisible_edit"
    :before-close="handleClose_edit"
    :modal-append-to-body="false"
  >
    <!-- 与添加屏幕信息界面一致 -->
    <el-form
      :model="screen_info"
      label-position="left"
      ref="screen_info_Form"
      :rules="rules"
    >
      <!-- <el-form-item label="ID"> 
          id
      </el-form-item> -->
      <el-form-item label="位置" label-width="80px" prop="name">
        <el-input
          v-model.trim="screen_info.name"
          autocomplete="off"
          placeholder="屏在哪个位置"
          maxlength="40"
        ></el-input>
      </el-form-item>
      <el-form-item label="IP" label-width="80px" prop="ip">
        <el-input
          v-model.trim="screen_info.ip"
          autocomplete="off"
          placeholder="屏的IP"
        ></el-input>
      </el-form-item>
      <el-form-item label="宽度" label-width="80px" prop="width">
        <el-input
          v-model.number="screen_info.width"
          :disabled="!is_add_screen"
          autocomplete="off"
          placeholder="屏的宽度,单位像素"
        ></el-input>
      </el-form-item>
      <el-form-item label="高度" label-width="80px" prop="height">
        <el-input
          v-model.number="screen_info.height"
          :disabled="!is_add_screen"
          autocomplete="off"
          placeholder="屏的高度,单位像素"
        ></el-input>
      </el-form-item>
      <el-form-item label="厂家" label-width="80px">
        <el-input
          v-model="screen_info.brand"
          autocomplete="off"
          placeholder="屏的品牌厂家"
        ></el-input>
      </el-form-item>
      <el-form-item label="区域" label-width="80px">
        <el-input
          v-model="screen_info.district"
          autocomplete="off"
          placeholder="屏在哪个区域"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogformvisible_edit', false)"
        >取 消</el-button
      >
      <el-button type="primary" @click="saveScreen">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
// import axios from "axios";
export default {
  name: "Screen_edit_dialog",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          { min: 4, max: 50, message: "长度在4到50个字符", trigger: "blur" },
        ],

        ip: [
          { required: true, message: "请输入屏幕ip", trigger: "blur" },
          { min: 7, max: 15, message: "请正确输入ip", trigger: "blur" },
        ],
        width: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          //   { min: 100, max: 1000, message: "长度在3到4个字符", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
        height: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          //   { min: 2, max: 3, message: "长度在2到3个字符", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
      },
      dialogformvisible_edit_data: this.dialogformvisible_edit,
    };
  },
  computed: {
    ...mapState(["screen_info"]),
  },
  props: ["dialogformvisible_edit", "is_add_screen"],
  methods: {
    saveScreen() {
      this.$refs.screen_info_Form.validate(async (valid) => {
        if (valid) {
          this.screen_info.width = +this.screen_info.width;
          if (this.screen_info.width < 100 || this.screen_info.width > 2000) {
            this.$message.error("宽度需在100~2000之间");
            return;
          }

          this.screen_info.height = +this.screen_info.height;
          if (this.screen_info.height < 32 || this.screen_info.height > 1000) {
            this.$message.error("宽度需在32~1000之间");
            return;
          }

          if (this.is_add_screen) {
            //axios.post add screen
            let ret = await this.$http.post("/screens", this.screen_info);
            console.log(ret);
            let { action, result } = ret.data.data;
            console.log(action, result);
            if (result == "ok") this.$message.success("添加屏幕成功");
            else this.$message.error("添加屏幕失败");
          } else {
            console.log(this.screen_info);
            let ret = await this.$http.put(
              `/screens/${this.screen_info.screen_id}`,
              this.screen_info
            );
            console.log(ret);
            let { action, result } = ret.data.data;
            console.log(action, result);
            if (result == "ok") this.$message.success("修改屏幕成功");
            else this.$message.error("修改屏幕失败");

          }
          this.$emit("update:dialogformvisible_edit", false);
        } else {
          this.$message.error("数据填写有错误");
          // return false; //?????
        }
      });
    },

    handleClose_edit(done) {
      //console.log('done',done);
      // return ;
      this.$confirm("确认关闭？")
        .then((_) => {
          //done(); //done 干啥的
          this.$emit("update:dialogformvisible_edit", false);
        })
        .catch((_) => {});
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>